
<button>
  <span class="text">FIRE !!!</span>
  <span class="bullet"></span>
</button>

<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: button */
button {
  padding: 0 15px 0 15px;
  font-size: 17px;
  font-weight: 700;
  text-shadow: 1px 1px 2.3px rgba(255,255,255, 0.8);
  position: relative;
  width: 150px;
  height: 40px;
  border-radius: 100% 9% 9% 100% / 0% 100% 100% 0%;
  border: none;
  background-image: linear-gradient(
                    180deg, #CDB373, #795E2B,
                    #AD8D53, #FFFAB7, #795D2F,
                    #614818, #BC9859, #876A35,
                    #736141);
}

button::before {
  content: '';
  height: 44px;
  width: 10px;
  position: absolute;
  top: -4.7%;
  left: -5.9%;
  border-radius: 100% 31% 28% 100% / 0% 100% 100% 0%;
  background-image: linear-gradient(
                    180deg, #CDB373, #795E2B,
                    #AD8D53, #FFFAB7, #795D2F,
                    #614818, #BC9859, #876A35,
                    #736141);
}

.bullet {
  height: 38px;
  width: 60px;
  position: absolute;
  top: 3%;
  left: 95%;
  border-radius: 10% 100% 100% 10% / 10% 50% 50% 10%;
  background-image: linear-gradient(
                    180deg, #512614, #A1623A,
                    #BA7447, #EDC38B, #B27449,
                    #DDAB77, #EAC4AE, #B67E4E,
                    #5B2D17, #44271C);
  z-index: -1;
}

button:active .bullet {
  left: 115%;
  transition: all 0.2s;
}
</style>
